<template>
    <div>
        <div>

        </div>
        <div style="margin-top: 75px">
            <Col span="12" offset="6">
                <Form>
                    <FormItem label="用户名">
                        <Input v-model="User.userName" placeholder="请输入用户名"></Input>
                        <Alert v-if="errorName" type="error">用户名已存在</Alert>
                    </FormItem>
                    <FormItem label="密码">
                        <Input v-bind:type="passwordType" placeholder="请输入密码" v-model="User.userPassword">
                            <Button v-bind:icon="buttonIcon" slot="append" @click="changePasswordType"></Button>
                        </Input>
                        <Input placeholder="请再次输入密码" v-bind:type="passwordType" v-model="passwordAgain"></Input>
                    </FormItem>
                    <FormItem label="昵称">
                        <Input v-model="User.nickName" placeholder="你的昵称"></Input>
                    </FormItem>
                    <FormItem label="性别">
                        <RadioGroup v-model="User.male">
                            <Radio label="male">
                                <Icon type="md-male"/>
                                <span>男</span>
                            </Radio>
                            <Radio label="female">
                                <Icon type="md-female"/>
                                <span>女</span>
                            </Radio>
                            <Radio label="secret">
                                <Icon type="ios-hand"/>
                                <span>保密~</span>
                            </Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="简介">
                        <Input type="textarea" :rows="4" v-model="User.userBrief" placeholder="给自己写一段简介吧"></Input>
                    </FormItem>
                    <FormItem label="邮箱">
                        <Input v-model="User.email" placeholder="请输入邮箱"></Input>
                    </FormItem>
                    <FormItem label="出生日期">
                        <DatePicker v-model="User.birthday" type="date" :start-date="new Date(1991, 4, 14)"
                                    placeholder="请输入您的出生日期"></DatePicker>
                    </FormItem>
                    <FormItem label="选择您的所在地">
                        <Cascader :data="city" v-model="citySelected" :value="citySelected"></Cascader>
                    </FormItem>
                    <FormItem>
                        <Row>
                            <Col offset="16">
                                <Button type="primary" @click="handleSubmit()">注册！</Button>
                            </Col>
                            <Col offset="1">
                                <label>已有账号？</label>
                                <Button size="small" to="/" type="success">立即登录</Button>
                            </Col>
                        </Row>
                    </FormItem>
                </Form>
            </Col>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import city from "@/utils/city";

    export default {
        name: "SignUp",
        data() {
            return {
                passwordType: 'password',
                buttonIcon: 'md-eye',
                citySelected: '',
                passwordAgain:'',
                User: {
                    userName: "",
                    userPassword: "",
                    nickName: "",
                    userBrief: "",
                    male: "secret",
                    email: "",
                    birthday: "",
                    location: "",
                    signUpDate: '',
                    lockedTimeStamp:0,
                    avatarUUID:'unset.png',
                    file:null
                },
                verificationImg:'',
                errorName: false,
                city: city.city,
            }
        },
        watch: {
            "User.userName": {
                handler: function () {
                    if(this.User.userName==="")
                        return
                    this.errorName = false
                    let self = this
                    console.log("enter")
                    axios({
                        method: 'get',
                        url: '/user/userName/' + this.User.userName
                    }).then(function (res) {
                        console.log(res)
                        if (res.data) {
                            self.errorName = true
                        }
                    })
                }
            }
        },
        methods: {
            changePasswordType() {
                if (this.passwordType === "password") {
                    this.passwordType = 'text'
                    this.buttonIcon = 'md-eye-off'
                } else {
                    this.passwordType = 'password'
                    this.buttonIcon = 'md-eye'
                }
            },
            beforePictureUpload(file){
                this.file=file
            },
            pictureFormatError(){

            },
            uploadAvatar(){
                axios({

                })
            },
            instance() {
                this.$Modal.success({
                    title: "注册成功",
                    content: "恭喜您，注册成功了，将跳转至登陆界面"
                });
                setTimeout(() => {
                    this.$router.replace('/SignIn')
                }, 2000);

                this.$router.replace('/SignIn')//界面跳转有问题
            },
            handleSubmit() {
                console.log(this.User+"UUU")
                if(this.passwordAgain!==this.User.userPassword){
                    this.$Notice.error({
                        title:'两次密码不一致'
                    })
                    return
                }
                if (this.User.userName === "") {
                    this.$Notice.error({
                        title: '哦宝贝，你总不能不给用户名吧',
                    });
                    return;
                }
                if (this.User.userPassword === "") {
                    this.$Notice.error({
                        title: '没有密码保护很不安全的',
                    });
                    return;
                }
                if (this.User.nickName === "") {
                    this.$Notice.error({
                        title: '不输昵称就给你变成张三',
                    });
                    return;
                }
                let self = this
                for (let i = 0; i < this.citySelected.length; i++) {
                    this.User.location += this.citySelected[i]
                }
                const Dates = new Date();
                const Y = Dates.getFullYear();
                const M = Dates.getMonth() + 1;
                const D = Dates.getDate();
                const H = Dates.getHours()
                const m = Dates.getMinutes()
                const S = Dates.getSeconds()
                const times = Y+"-"+M+"-"+D+" "+H+":"+m+":"+S;
                this.User.signUpDate = times
                const birthday = this.User.birthday;
                const Yb = birthday.getFullYear();
                const Mb = birthday.getMonth() + 1;
                const Db = birthday.getDate();
                const timesb = Yb+"-"+Mb+"-"+Db+" "+"00:00:00";
                this.User.birthday=timesb
                console.log(this.User)
                axios({
                    method: 'post',
                    url: 'api/signup',
                    data: this.User
                }).then(function (res) {
                    console.log(res)
                    self.instance()
                })
            }
        }
    }
</script>

<style scoped>

</style>